<template>
  <!-- 基本信息 -->
  <view class="carbasicboxs">
    <u-toast ref="uToast" />
    <view class="carbox">
      <view class="font-34 color-333 font-bold">
        车辆信息
      </view>
      <view class="cariconbox flex mt-15">
        <view class="carifist">
          <view class="font-26 color-999 mb_15">款型</view>
          <view class="fistbox">
            <view class="font-28 color-333 shuanghang">
              {{carnames}}
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2">
            <view class="fiscente">
              <view class="font-26 color-999 mb_15">车牌号</view>
              <view class="flex">
                <view class="flex" @click="lishows()">
                  {{licensePlate}}
                  <view class="front-icon">
                    <u-icon :class="show ? 'arrow-up' : 'arrow-down'" name="arrow-down-fill" size="22rpx"></u-icon>
                  </view>
                </view>
                <view @click="lishowsnum()" class="carhaoc">
                  <view class="font-28 color-999" v-if="!licensePlate2">
                    请输入车牌号
                  </view>
                  <view class="font-28 color-333" v-else>
                    {{licensePlate2}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cariconbox mt-30 flex">
        <view class="carifist">
          <view class="fistbox">
            <view class="fiscente">
              <view class="font-26 color-999 mb_15">发动机排量</view>
              <view class="font-28 color-333">
                {{displacement}}
              </view>
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2">
            <view class="fiscente">
              <view class="font-26 color-999 mb_15">年款</view>
              <view class="font-28 color-333">
                {{modelYear}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cariconbox mt-30 flex">
        <view class="fistbox" @click="mileageclick(0)">
          <view class="fiscente">
            <view class="font-26 color-999 mb_15">行驶里程</view>
            <view class="font-28 color-333 flex flex-ai-c" style="height: 30rpx;" v-show="smileageshow">
              <u-input v-model="mileage" style="width: 240rpx;" type="number" placeholder='请输入行驶里程(KM)' maxlength='11'
                class="inputtext" placeholder-style="color: #999999;font-size:26rpx;" @blur="hidemileagetitle1" />
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2">
            <view class="fiscente" @click="onTime = true">
              <view class="font-26 color-999 mb_15">上路时间</view>
              <view class="font-28 color-333">
                {{onRoadTime}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cariconboxzh mt-30 flex">
        <view class="fistboxzh" @click="mileageclick(1)">
          <view class="fiscente">
            <view class="font-26 color-999 mb_15">车辆识别代码（VIN)</view>
            <view class="font-28 color-333 flex flex-ai-c" style="height: 30rpx;" v-show="identifcshow">
              <input v-model="identificationCode" @input="$u.debounce(identiffocus, 500)" style="width: 600rpx;" type="text"
                maxlength="17" placeholder='请输入车辆识别代码' class="inputtext" placeholder-style="color: #999999;font-size:26rpx;"
                @blur="hidemileagetitle2" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-gap height="11" bg-color="#F6F6F6"></u-gap>
    <view class="carbox">
      <view class="font-34 color-333 font-bold">
        车险信息
      </view>
      <view class="cariconbox mt-30 flex">
        <view class="carifist">
          <view class="fistbox">
            <view class="fiscente" @click="insupClick()">
              <view class="font-26 color-999 mb_15">商业保险公司</view>
              <view class="baoxtu font-28 color-333 flex" v-show="insupls.url">
                <image :src="insupls.url" mode="heightFix"></image>
                {{insupls.name}}
              </view>
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2">
            <view class="fiscente" @click="insuduetime = true">
              <view class="font-26 color-999 mb_15">保险到期日</view>
              <view class="font-28 color-333" v-show="insuranceDue">
                {{insuranceDue}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cariconbox mt-30 flex">
        <view class="fistbox" @click="mileageclick(2)">
          <view class="fiscente">
            <view class="font-26 color-999 mb_15">车主姓名</view>
            <view class="font-28 color-333 flex flex-ai-c" style="height: 30rpx;" v-show="carNames">
              <u-input v-model="carnametitle" type="text" maxlength="4" placeholder='请输入车主姓名' class="inputtext"
                placeholder-style="color: #999999;font-size:26rpx;" @blur="hidemileagetitle3" />
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2" @click="mileageclick(3)">
            <view class="fiscente">
              <view class="font-26 color-999 mb_15">身份证号码</view>
              <view class="font-28 color-333 flex flex-ai-c" style="height: 30rpx;" v-show="idcards">
                <u-input v-model="idcardstitle" type="number" maxlength="18" placeholder='请输入身份证号码' class="inputtext"
                  placeholder-style="color: #999999;font-size:26rpx;" @blur="hidemileagetitle4" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cariconboxzh mt-30 flex">
        <view class="fistbox" @click="showadd = true">
          <view class="fiscente">
            <view class="font-26 color-999 mb_15">投保城市</view>
            <view class="font-28 color-333">
              {{insuredCity}}
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2" @click="transfertatus = true">
            <view class="fiscente">
              <view class="font-26 color-999 mb_15">一年内是否过户</view>
              <view class="font-28 color-333">
                {{transfer}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="maintenance" @click="mannameClick()">
      <view class="maname">
        去保养
      </view>
    </view>
    <u-keyboard v-model="show" @change="valChange" :abc="false" @backspace="backspace" :safe-area-inset-bottom="true"
      mode="car" tips="请输入车牌号" :cancelBtn="true"></u-keyboard>
    <u-keyboard v-model="shownum" @change="valChangenum" :abc="true" @backspace="backspacenum" :safe-area-inset-bottom="true"
      mode="car" tips="请输入车牌号" :cancelBtn="true"></u-keyboard>
    <!-- 上路时间 -->
    <u-picker title="上路时间" v-model="onTime" mode="time" confirm-color="#FBB000" @confirm="ontimeclick" :params="paramstime"></u-picker>
    <!-- 保险到期日 -->
    <u-picker title="保险到期日" v-model="insuduetime" mode="time" confirm-color="#FBB000" @confirm="timeclick" :params="params"></u-picker>
    <!-- 投保城市 -->
    <u-picker title="投保城市" v-model="showadd" mode="region" confirm-color="#FBB000" @confirm="adddressclick" :params="addressparams"
      :area-code='["51", "5101"]'></u-picker>
    <!-- 一年内是否过户 -->
    <u-picker title="一年内是否过户" v-model="transfertatus" confirm-color="#FBB000" @confirm="transfclick" :range="transferlist"
      mode="selector" :default-selector="[0]"></u-picker>
  </view>
</template>

<script>
  export default {
    props: {
      tabIndex: {
        type: [Number, String],
        default: 0
      },
      list: {
        type: Array,
        default: () => []
      },
      carid: {
        type: String,
        default: ''
      },
      currentIndex: {
        type: Number,
        default: 0
      },
    },
    watch: {
      list(val) {
        // console.log('val', val)
      },
      tabIndex(newVal, oldVal) {
        if (newVal === 0) {
          this.cuttnum = newVal
          if (this.caridone) {
            this.GetCarData(this.caridone)
          }
        }
      },
      carid(e) {
        // 车子id不为空,调取基本信息
        this.caridone = e
        if (this.cuttnum === 0) {
          if (e) {
            this.GetCarData(e)
          }
        }
      },
    },
    data() {
      return {
        cuttnum: 0,
        caridone: '',
        show: false, //打开键盘
        shownum: false, //打开键盘
        jilu: 0, //记录 1为地址，2为车牌数字
        licensePlate: '川', //车牌号
        licensePlate2: '', //车牌号
        displacement: '4.0T', //发动机排量
        modelYear: '2020', //年款
        mileage: 0, //里程
        identificationCode: '', //识别代码VIN
        carnametitle: '', //车主姓名
        idcardstitle: '', //身份证号码

        //上路时间
        onRoadTime: '',
        paramstime: {
          year: true,
          month: true,
          day: false,
          hour: false,
          minute: false,
          second: false
        },
        onTime: false,
        //保险到期日
        insuranceDue: '',
        params: {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        },
        insuduetime: false,

        smileageshow: false,
        identifcshow: false,
        carNames: false,
        idcards: false,

        //地区
        addressparams: {
          province: true,
          city: true,
          area: false
        },
        showadd: false,
        insuredCity: '', //投保城市
        insuredCityId: 0, //投保城市id

        //是否过户
        transfer: '',
        transfertatus: false,
        transferlist: ['是', '否'],
        transferid: 0, //过户id
        basicInformation: '', //基本信息
        insupls: '', //保险公司
        insuplsid: 1,
        insuplsimg: '',
        carnames: '', //车名称
        currentTime: new Date().toISOString().slice(0, 10),

      }
    },
    created() {
      this.cuttnum = this.tabIndex
    },
    methods: {
      //获取我的爱车--基本信息
      async GetCarData(xzcarid) {
        try {
          let data = {
            carid: xzcarid
          }
          const res = await this.$api.commodity.GetCarData(data)
          if (res.data.insurance.duetotime !== null || res.data.insurance.duetotime !== undefined) {
            res.data.insurance.duetotime = res.data.insurance.duetotime.split(' ')[0]
          }
          this.basicInformation = res.data
          this.carnames = res.data.car_name
          this.licensePlate = res.data.car_num_head //车牌号头 如 川
          this.licensePlate2 = res.data.car_num //车牌号
          if (res.data.displacement === '-1') {
            this.displacement = '电动/混动' //排量
          } else {
            this.displacement = res.data.displacement //排量
          }
          this.modelYear = res.data.yeartype //年框
          this.mileage = res.data.mileage //行驶里程
          if (this.mileage !== '') {
            this.smileageshow = true
          }
          if (res.data.roadTimes !== '') {
            this.onRoadTime = res.data.roadTimes.split('-')[0] + '-' + res.data.roadTimes.split('-')[1] //上路时间
          } else {
            this.onRoadTime = res.data.roadTimes //上路时间
          }
          this.identificationCode = res.data.vin //VIN
          if (this.identificationCode !== '') {
            this.identifcshow = true
          }
          this.insuplsid = res.data.insurance.insurance_id //保险公司id
          if (this.insuplsid !== '') {
            this.insurance()
          }
          this.insuranceDue = res.data.insurance.duetotime //保险到期时间
          this.carnametitle = res.data.insurance.car_master //主车名称
          if (this.carnametitle !== '') {
            this.carNames = true
          }
          this.idcardstitle = res.data.insurance.cardnumber //身份证号码
          if (this.idcardstitle !== '') {
            this.idcards = true
          }
          this.insuredCity = res.data.insurance.city //投保城市
          this.insuredCityId = res.data.insurance.cityid //投保城市id
          this.transferid = res.data.insurance.transfer //一年内是否过户
          if (this.transferid === 0) {
            this.transfer = '是'
          } else {
            this.transfer = '否'
          }
        } catch (e) {
          console.log(e)
        }
      },
      //获取我的爱车--修改爱车保险数据
      async UpdateCarInsuranceData() {
        try {
          let data = {
            account_car_id: this.carid, //爱车id
            insurance_id: this.insuplsid, //保险公司id
            duetotime: this.insuranceDue, //保险到期时间
            car_master: this.carnametitle, //主车名称
            cardnumber: this.idcardstitle, //身份证号码
            cityid: this.insuredCityId, //投保城市id
            city: this.insuredCity, //投保城市名称
            transfer: this.transferid //一年内是否过户
          }
          const res = await this.$api.commodity.UpdateCarInsuranceData(data)
          if (res.data) {
            uni.showToast({
              title: '修改成功',
              duration: 3000,
              icon: 'none'
            })
          }

        } catch (e) {
          console.log(e)
        }
      },
      //获取我的爱车--修改爱车--基础数据
      async UpdateCarData() {
        var carhao = this.licensePlate + this.licensePlate2
        if (this.onRoadTime !== '') {
          var shangtimes = this.onRoadTime
        } else {
          shangtimes = this.onRoadTime
        }
        try {
          let data = {
            carid: this.carid, //爱车id
            car_num: carhao, //车牌号
            mileage: Number(this.mileage), //里程 /km
            vin: this.identificationCode, //vin号
            // engine: this.displacement, //发动机号
            roadTime: shangtimes //上路时间
          }
          const res = await this.$api.commodity.UpdateCarData(data)
          if (res.data) {
            uni.showToast({
              title: '修改成功',
              duration: 3000,
              icon: 'none'
            })
          }


        } catch (e) {
          console.log(e)
        }
      },
      //保险公司
      async insurance() {
        try {
          const res = await this.$api.jsonData.insurance()
          let listbox = [] //暂存赋值
          res.data.forEach((item) => {
            if (this.insuplsid === item.id) {
              this.insupls = item
            }
          })
        } catch (err) {
          console.log(err)
        }
      },
      lishows() {
        this.show = true
        uni.pageScrollTo({
          scrollTop: 200,
          duration: 100
        })
      },
      lishowsnum() {
        this.shownum = true
        uni.pageScrollTo({
          scrollTop: 200,
          duration: 100
        })
      },

      // 按键被点击(点击退格键不会触发此事件)
      valChange(val) {
        let str = val
        let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (reg.test(str)) {
          this.licensePlate = val
          this.UpdateCarData()
        }
      },
      valChangenum(val) {
        if (this.licensePlate2.length < 7) {
          let str = val
          let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
          if (!reg.test(str)) {
            this.licensePlate2 += val;
            if (this.licensePlate2.length >= 6) {
              this.UpdateCarData()
            }
          }
        } else {
          this.shownum = false
          this.$refs.uToast.show({
            title: '请输入正确的车牌号',
            icon: false,
            type: 'warning',
          })
        }

      },
      // 退格键被点击
      backspace() {
        if (this.licensePlate.length) this.licensePlate = this.licensePlate.substr(0, this.licensePlate.length - 1);
      },
      backspacenum() {
        if (this.licensePlate2.length) this.licensePlate2 = this.licensePlate2.substr(0, this.licensePlate2.length - 1);
      },
      //上路时间
      ontimeclick(data) {
        var currentTimeS = this.currentTime.split('-')[0] + '-' + this.currentTime.split('-')[1]
        var riqi1 = Number(data.year + data.month) //选择的日期
        var riqi2 = Number(currentTimeS.match(/\d+/g).join('')) //今天
        if (riqi1 <= riqi2) {
          this.onRoadTime = data.year + '-' + data.month
          this.UpdateCarData()
        } else {
          this.$refs.uToast.show({
            title: '请选择今天之前的日期',
            icon: false,
            type: 'warning',
          })
        }
      },
      //保险到期日
      timeclick(data) {
        this.insuranceDue = data.year + '-' + data.month + '-' + data.day
        this.UpdateCarInsuranceData()
      },
      //投保城市
      adddressclick(data) {
        this.insuredCityId = data.city.id
        this.insuredCity = data.province.label + data.city.label
        this.UpdateCarInsuranceData()
      },
      //是否过户
      transfclick(data) {
        if (data[0] === 0) {
          this.transferid = 0
          this.transfer = '是'
        } else {
          this.transferid = 1
          this.transfer = '否'
        }
        this.UpdateCarInsuranceData()
      },
      //0行驶里程  1车辆识别代码 2车主姓名 3身份证号码
      mileageclick(type) {
        if (type === 0) { //行驶里程
          this.smileageshow = true
        } else if (type === 1) { //车辆识别代码
          this.identifcshow = true
        } else if (type === 2) { //车主姓名
          this.carNames = true
        } else if (type === 3) { //身份证号码
          this.idcards = true
        }
      },
      //行驶里程input框失去焦点
      hidemileagetitle1() {
        if (this.mileage === '') {
          this.smileageshow = false
        } else {
          this.UpdateCarData()
        }
      },
      //车辆识别代码
      hidemileagetitle2() {
        if (this.identificationCode === '') {
          this.identifcshow = false
        } else {
          this.UpdateCarData()
        }
      },
      identiffocus() {
        var e = this.identificationCode
        if (e === '') {
          return
        }
        var reg = /^[0-9a-zA-Z]+$/
        if (!reg.test(e)) {
          this.identificationCode = ''
          this.identifcshow = false
          this.$refs.uToast.show({
            title: '车架号由字母+数字组成',
            icon: false,
            type: 'warning',
          })
        } else {
          this.UpdateCarData()
        }
      },
      //车主姓名
      hidemileagetitle3() {
        if (this.carnametitle === '') {
          this.carNames = false
        } else {
          this.UpdateCarInsuranceData()
        }
      },
      //身份证号码
      hidemileagetitle4() {
        if (this.idcardstitle === '') {
          this.idcards = false
        } else {
          this.UpdateCarInsuranceData()
        }

      },
      //婚姻状况
      maritSclick(items, type) {
        let listbox = [] //暂存赋值
        this.mStitle = items.name
        this.mSid = items.id
        this.maritalist.forEach((item, i) => {
          if (i === type) {
            if (item.check === false) {
              item.check = true
            } else {}
          } else {
            item.check = false
          }
          listbox.push(item)
        })
        this.maritalist = listbox
        this.maritalStatus = false
      },
      //保险公司
      insupClick() {
        uni.redirectTo({
          url: '/pages_common/insurancecompany/insurancecompany?carid=' + this.carid + '&currentIndex=' + this.currentIndex
        })
      },
      // 去保养
      mannameClick() {
        uni.navigateTo({
          url: '/pages_commodity/doMaintenance/doMaintenance?carId=' + this.carid
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: #F6F6F6;
  }

  .carbasicboxs {
    background: #F6F6F6;
  }

  .carbox {
    padding: 30rpx 24rpx 0rpx;
    background: #ffffff;
  }

  .cariconbox {
    border-bottom: 1px solid #EEEEEE;
    padding: 0rpx 4rpx 30rpx 4rpx;
  }

  .cariconboxzh {
    padding: 0rpx 4rpx 30rpx 4rpx;
  }

  .fistbox {
    border-right: 1px solid #EEEEEE;
    padding-right: 40rpx;
    width: 350rpx;
    height: 76rpx;
    display: flex;
  }

  .shuanghang {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .fiscente {
    align-self: center
  }

  .baoxtu {
    image {
      width: 44rpx;
      height: 44rpx;
      margin-right: 15rpx;
    }
  }

  .fistboxzh {
    padding-right: 40rpx;
    width: 350rpx;
    height: 76rpx;
    display: flex;
  }

  .fistbox2 {
    padding-left: 70rpx;
    width: 350rpx;
    height: 76rpx;
    display: flex;
  }

  .front-icon {
    width: 40rpx;
    text-align: center;

    .arrow-up {
      transform: rotate(180deg);
      color: #FBB000
    }

    .arrow-down {
      color: #333333
    }
  }

  .carhaoc {
    margin-left: 30rpx;
  }

  .maintenance {
    padding: 99rpx 24rpx;

    .maname {
      height: 88rpx;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      border-radius: 44rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      color: #333333;
    }
  }

  .hgzbox {
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    height: 780rpx;

    .hgztitle {
      border-bottom: 1px solid #EEEEEE;
      line-height: 96rpx;
      font-size: 36rpx;
      color: rgba(51, 51, 51, 1);
      padding: 0rpx 40rpx;

      .titname {
        width: 680rpx;
        text-align: center;
      }

      .iconcss {
        text-align: right;
      }
    }

    .hgxz {
      line-height: 90rpx;
      font-size: 30rpx;
      color: rgba(102, 102, 102, 1);
    }

    .hgxuanzhong {
      line-height: 90rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FBB000;
    }

  }
</style>
